<template>
  <div class="main-container">
    <div class="title">
      <h2>个人资料</h2>
      <p>查看和编辑您的个人基本信息</p>
    </div>

     <div class="profile-content">
      <!-- 用户信息侧边栏 -->
      <div class="profile-sidebar">
        <div class="user-avatar">
          <img src="https://picsum.photos/200/200" alt="用户头像" class="avatar">
          <!-- <img :src="userForm.photo" alt="用户头像" class="avatar"> -->

          <span class="username">张三</span>
          <span class="class-info">初二(3)班</span>
        </div>
        
        <div class="user-details">
          <div class="detail-item">
            <span class="icon"><el-icon><Document /></el-icon></span>
            <span class="label">学号</span>
            <span class="value">202203015</span>
          </div>
          <div class="detail-item">
            <span class="icon"><el-icon><Message /></el-icon></span>
            <span class="label">电子邮箱</span>
            <span class="value">zhangsan@school.edu.cn</span>
          </div>
          <div class="detail-item">
            <span class="icon"><el-icon><Phone /></el-icon></span>
            <span class="label">联系电话</span>
            <span class="value">138****5678</span>
          </div>
          <div class="detail-item">
            <span class="icon"><el-icon><Calendar /></el-icon></span>
            <span class="label">注册时间</span>
            <span class="value">2022-09-01</span>
          </div>
        </div>
        
        <!-- 账户安全卡片 -->
        <div class="security-card">
          <h3>账户安全</h3>
          <div class="security-item">
            <span>密码修改</span>
            <el-button type="text" class="modify-btn">立即修改</el-button>
          </div>
          <div class="security-hint">上次修改: 3个月前</div>
        </div>
      </div>
      
      <!-- 个人信息编辑区域 -->
      <div class="profile-form">
        <el-card class="form-card">
          <template #header>
            <div class="card-header">
              <span>基本信息</span>
            </div>
          </template>
          
          <!-- 修改el-form的label-width为auto，并添加label-block-form类 -->
          <el-form label-width="auto" :model="userForm" class="profile-info-form">
            <el-row :gutter="20">
              <el-col :span="isMobile ? 24 : 12">
                <el-form-item label="姓名" prop="name">
                  <el-input v-model="userForm.name" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="isMobile ? 24 : 12"> 
                <el-form-item label="性别" prop="gender">
                  <el-input v-model="userForm.gender" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="isMobile ? 24 : 12">

                <el-form-item label="出生日期" prop="birthday">
                  <el-input v-model="userForm.birthday" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="isMobile ? 24 : 12">
                <el-form-item label="学号" prop="studentId">
                  <el-input v-model="userForm.studentId" :disabled="true"></el-input>
                  <div class="form-hint">学号由系统自动生成，不可修改</div>
                </el-form-item>
              </el-col>
              <el-col :span="isMobile ? 24 : 12">
                <el-form-item label="年级" prop="grade">
                  <el-input v-model="userForm.grade" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="isMobile ? 24 : 12">

                <el-form-item label="班级" prop="class">
                  <el-input v-model="userForm.class"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="isMobile ? 24 : 24">
                <el-form-item label="家庭住址" prop="address">
                  <el-input v-model="userForm.address" type="textarea"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <h3 style="margin: 10px 0;">联系方式</h3>
              <el-row :gutter="20">
              <el-col :span="isMobile ? 24 : 12">
                <el-form-item label="电子邮箱" prop="email">
                  <el-input v-model="userForm.email"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="isMobile ? 24 : 12">
                <el-form-item label="联系电话" prop="phone">
                  <el-input v-model="userForm.phone"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="isMobile ? 24 : 12">
                <el-form-item label="父亲姓名" prop="fatherName">
                  <el-input v-model="userForm.fatherName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="isMobile ? 24 : 12">
                <el-form-item label="父亲联系电话" prop="fatherPhone">
                  <el-input v-model="userForm.fatherPhone"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="isMobile ? 24 : 12">
                <el-form-item label="母亲姓名" prop="motherName">
                  <el-input v-model="userForm.motherName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="isMobile ? 24 : 12">
                <el-form-item label="母亲联系电话" prop="motherPhone">
                  <el-input v-model="userForm.motherPhone"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>

          <template #footer>
            <div class="form-actions">
              <el-button @click="handleCancel">取消</el-button>
              <el-button type="primary" @click="handleSave">保存修改</el-button>
            </div>
          </template>
        </el-card>
        
    
      </div>
    </div>
   
  </div>
</template>

<script setup>
// 可以添加必要的导入和逻辑
import { ref, reactive, onMounted, onUnmounted } from 'vue';
import { getStuInfo } from '@/api/list';
import { ElMessage } from 'element-plus';
import { getStuPhoto } from '@/api/user';



import cardContent from '@/components/card-content.vue'; 
import { useStore } from "@/store";
const store = useStore();

import {
  Document,
  Message,
  Phone,
  Calendar,
  User
} from '@element-plus/icons-vue';

// 检测是否为移动设备
const isMobile = ref(false);

const checkDeviceType = () => {
  const width = window.innerWidth;
  isMobile.value = width < 768; // 768px为断点
};



// 模拟用户数据
const userForm = reactive({
  photo: '',
  name: '张三',
  gender: '男',
  birthday: '2009/05/12',
  studentId: '202203015',
  grade: '初二',
  class: '3班',
  address: '北京市海淀区中关村南大街5号',
  email: 'zhangsan@school.edu.cn',
  phone: '13812345678',
  fatherName: '张明',
  fatherPhone: '13987654321',
  motherName: '李华',
  motherPhone: '13712345678'
});


// 保存按钮处理函数
const handleSave = () => {
  // 这里可以添加保存逻辑
  ElMessage.success('保存成功');
};

// 取消按钮处理函数
const handleCancel = () => {
  // 这里可以添加取消逻辑，例如重置表单
};

onMounted(() => {
  // 检测设备类型
  checkDeviceType();
  window.addEventListener('resize', checkDeviceType);
  getStuInfo().then(res => {
    console.log(res)
  }).catch(err => {
   ElMessage.success('获取学生信息失败');
   console.log(err)
  })

  getStuPhoto('0').then(res => {
    // console.log(res)

    userForm.photo = res;
  }).catch(err => {
   ElMessage.success('获取学生照片失败'+err);

  })


});

onUnmounted(() => {
  window.removeEventListener('resize', checkDeviceType);
});


</script>

<style scoped lang="scss">
.main-container {
  max-width: 1450px;
  margin: 0px auto;
  padding: 10px;

  .title {
    max-width: 1420px;
    margin: 0 0 20px 0;

    h2 {
      font-size: 22px;
      font-weight: 800;
      margin: 10px 0;
    }
  }

  .profile-content {
    display: flex;
    gap: 20px;
  }
  
  .profile-sidebar {
    width: 350px;
    flex-shrink: 0;
  }
  
  .profile-form {
    flex: 1;
  }
  
  .user-avatar {
    text-align: center;
    padding: 30px 0;
    background-color: #f5f7fa;
    border-radius: 10px;
    margin-bottom: 20px;
  }
  
  .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 10px;
  }
  
  .username {
    display: block;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
  }
  
  .class-info {
    display: block;
    color: #606266;
    font-size: 14px;
  }
  
  .user-details {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .detail-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .detail-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  
  .icon {
    margin-right: 10px;
    color: #606266;
  }
  
  .label {
    width: 60px;
    color: #909399;
    font-size: 14px;
  }
  
  .value {
    flex: 1;
    color: #303133;
    font-size: 14px;
  }
  
  .security-card {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .security-card h3 {
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: 600;
  }
  
  .security-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .security-hint {
    font-size: 12px;
    color: #909399;
  }
  
  .form-card {
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .card-header {
    display: flex;
    align-items: center;
  }
  
  .card-header span {
    font-size: 16px;
    font-weight: 600;
  }
  
  .profile-info-form,
  .contact-info-form {
    padding: 10px 0;
  }
  
  .form-hint {
    font-size: 12px;
    color: #909399;
    margin-top: 5px;
  }
  
  .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding: 20px;
    border-radius: 10px;
  }
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .main-container {
    .title {
      max-width: 100%;
      margin: 0 0 20px 0;

      .title-top {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;

        .el-select {
          width: 100%;
        }
      }
    }

    .profile-content {
      flex-direction: column;
      gap: 15px;
    }
    
    .profile-sidebar {
      width: 100%;
    }
    
    .user-details {
      padding: 15px;
    }
    
    .security-card {
      padding: 15px;
    }
    
    .form-card {
      margin-bottom: 15px;
    }
    
    .profile-info-form,
    .contact-info-form {
      .el-row {
        flex-direction: column;
        .el-col {
          width: 100%;
          &:not(:last-child) {
            margin-bottom: 10px;
          }
        }
      }
      
      .el-form-item {
        margin-bottom: 15px;
      }
    }
    
    .form-actions {
      flex-direction: column;
      padding: 15px;
      margin-top: 15px;
      
      .el-button {
        width: 100%;
        margin-left: 0;
      }
    }
  }
}



/* 小屏幕手机适配 */
@media screen and (max-width: 480px) {
  .main-container {
    padding: 8px;
    
    .title h2 {
      font-size: 18px;
    }
    
    .title p {
      font-size: 14px;
    }
  }
}
</style>
